<template>
	<view class="container">
		<view class="header">
			<image class="logo" src="/static/img/logo.png"></image>
			<view class="header_title">天意美业直通车</view>
		</view>
		<!--<view class="content" v-if="system == 'ios'">
			<view class="title">授权登陆</view>
			<view class="login_list">
				<view class="wxapp" @click="login">
					<image src="/static/icon/wxLogin.png"></image>
					<text>通过微信授权登陆</text>
				</view>
				<view class="apple" @click="login">
					<image src="/static/icon/apple.jpg"></image>
					<text>通过apple登陆</text>
				</view>
			</view>
		</view>-->
		<!--<view v-if="switchValue == 1">
			<view class="view_input1">
			    <view class="view_input_title2">登陆账号:</view>
				<input class="view_input_input1" type="text"
				v-model="form.login_name"
				placeholder-class="placeholderClass" placeholder="请输入登陆账号"/>
			</view>
			<view class="view_input1">
			    <view class="view_input_title2">登陆密码:</view>
				<input class="view_input_input1" type="password"
				v-model="form.login_pass"
				placeholder-class="placeholderClass" placeholder="请输入登陆密码"/>
			</view>
			<view class="test">测试账号为:test 测试密码为:123456</view>
			<view class="loginButton" @click="loginIn">登陆</view>
		</view>-->
		<view class="content">
			<view class="title">微信授权</view>
			<image @click="loginShow" class="icon" src="/static/icon/wxLogin.jpg"></image>
		</view>
		
		<view class="footer" v-if="switchValue !== 1">
			<view @click="formClick('serviceShow')">服务协议</view>
			<view @click="formClick('policyShow')">隐私政策</view>
		</view>
		<view class="bgzd" v-if="formShow">
			<view class="form">
				<view class="form_title">服务协议和隐私政策</view>
				<view class="form_content">
					请您务必审慎阅读，充分理解“服务协议”和“隐私政策”各条款，包括但不限于：
					为了向您提供即时通讯、内容分享等服务，我们需要收集你的设备信息、操作日志等个人信息。
					你可以在“设置”中查看、变更、删除个人信息并管理你的授权。
					你可阅读
					<text class="form_remark" @click="formClick('serviceShow')">《服务协议》</text>和
					<text class="form_remark" @click="formClick('policyShow')">《隐私政策》</text>
					了解详细信息。如你同意，请点击“同意”开始接受我们的服务。
				</view>
				<view class="form_footer">
					<view @click="cancel">暂不使用</view>
					<view @click="agree">同意</view>
				</view>
			</view>
		</view>
		<serviceRule v-if="serviceShow" @func="close"></serviceRule>
		<policyRule v-if="policyShow" @func="close"></policyRule>
	</view>
</template>
<script>
import request from '@/util/request.js'
import serviceRule from "@/components/serviceRule.vue"//充值
import policyRule from "@/components/policyRule.vue"//开卡
export default {
	data() {
		return {
			system:'',
			serviceShow:false,
			policyShow:false,
			formShow:false,
			switchValue:0,
			form:{}
		}
	},
	components:{serviceRule,policyRule},
	onLoad(e){
		// uni.showLoading({  
		//     title: '加载中'  
		// });
		this.getSystem();
		// console.log(uni.getStorageSync('system'));
	},
	methods: {
		getSystem:function(){
			var that = this
			uni.getSystemInfo({
				success: function (res) {
					//console.log(res.platform)
					that.system = res.platform
					if(res.platform == 'ios'){
						that.getSwitch()
					}
				}
			});
		},
		getSwitch:function(){
			var that = this
			request({
				url: 'config/apple',
				method: 'get',
				success:(res) => {
					that.switchValue = res.data.data
				},
			})
		},
		loginShow:function(){
			this.formShow = true
		},
		agree:function(){
			this.formShow = false
			this.login()
		},
		login:function(){
			var that = this
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					//console.log('111',res)
					//apple登陆
					if (~res.provider.indexOf('apple')) {
						uni.login({ 
							provider: 'apple',  
							success: function (loginRes) {  
								// 登录成功  
								uni.getUserInfo({  
									provider: 'apple',  
									success:function(userRes) {  
										// 获取用户信息成功 
										console.log(userRes)
									}  
								})  
							},  
							fail: function (err) {  
								// 登录失败  
							}
						})
					}
					//支持微信、qq和微博等
					if (~res.provider.indexOf('weixin')) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes){
								var uninfo = loginRes.authResult;
								var openid = uninfo.openid
								var unionid = uninfo.unionid
								var data = {
									'unionid':unionid
								}
								request({
									url: 'user/getUnionid',
									method: 'get',
									data:data,
									success:(userRes) => {
										if(userRes.data.code == 1){
											//储存过信息
											that.loginGo(userRes.data.data)
										}else{
											// 获取用户信息
											uni.getUserInfo({
												provider: 'weixin',
												success: function(infoRes){
													var userInfo = infoRes.userInfo
													var dataInfo = {
														'nickname':userInfo.nickName,
														'avatar':userInfo.avatarUrl,
														'app_openid':openid,
														'unionId':unionid
													}
													that.userAdd(dataInfo);
												}
											});
										}
									}
								})
							}
						});
					}
				},
				fail:function(error){
					console.log('22222',error)
				}
			})
		},
		loginGo:function(info){
			uni.setStorageSync('uid',info.id);
			uni.setStorageSync('avatarUrl',info.avatar);
			uni.setStorageSync('nickName',info.nickname);
			uni.setStorageSync('role',info.role);
			if(!info.phone){
				//没有验证手机号  进行验证
				uni.navigateTo({
					url:'/pages/index/phone'
				});
			}else{
				if(info.role == 1){
					//未注册状态
					uni.navigateTo({
						url:'/pages/login/index'
					});
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			}
		},
		userAdd:function(data){
			request({
				url: 'user/appAdd',
				method: 'post',
				data:data,
				success:(res) => {
					if(res.data.code == 1){
						uni.showToast({
							title: '登陆成功!!',
							icon: "none", 
							position:'bottom',
						});
						uni.setStorageSync('uid',res.data.data);
						uni.setStorageSync('avatarUrl',data.avatar);
						uni.setStorageSync('nickName',data.nickname);
						uni.setStorageSync('role',1);
						uni.navigateTo({
							url:'/pages/index/phone'
						});
					}else{
						uni.showToast({
							title: '登陆失败!!',
							icon: "none", 
							position:'bottom',
						});
						return;
					}
				},
			})
		},
		// addSession:function(e){
		// 	this.uid = e.detail.value
		// },
		// ok:function(){
		// 	var data = {uid:this.uid}
		// 	request({
		// 		url: 'user/test',
		// 		method: 'get',
		// 		data:data,
		// 		success: (res) => {
		// 			if(res.data.code == 1){
		// 				uni.setStorageSync('uid',res.data.data.id);
		// 				uni.setStorageSync('avatarUrl',res.data.data.avatar);
		// 				uni.setStorageSync('nickName',res.data.data.nickname);
		// 				uni.setStorageSync('role',res.data.data.role);
		// 				uni.switchTab({
		// 					url:'/pages/index/index'
		// 				})
		// 			}else{
		// 				uni.showToast({
		// 					title: '用户不存在!!',
		// 					icon: "none", 
		// 					position:'bottom',
		// 				});
		// 				return;
		// 			}
		// 		}
		// 	})
		//}
		formClick:function(key){
			this[key] = true
		},
		close:function(data){
			this[data] = false
		},
		cancel:function(){
			this.formShow = false
		},
		loginIn:function(){
			if(this.form.login_name !== 'test'){
				uni.showToast({
					title: '登陆账号不存在!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			if(this.form.login_pass !== '123456'){
				uni.showToast({
					title: '登陆密码不正确!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			uni.setStorageSync('role',99)
			uni.setStorageSync('uid',1)
			uni.switchTab({
				url:'/pages/index/index'
			});
		}
	}
}
</script>
<style>
.header{
	width:100%;
	height:350rpx;
	text-align: center;
	padding-top:80rpx;
}	
.logo{
	width:150rpx;
	height:150rpx;
}
.header_title{
	margin-top:50rpx;
}
.content{
	width:100%;
	height:350rpx;
	text-align: center;
	padding-top:40rpx;
	border-top:8rpx solid #000000;
}
.icon{
	margin-top:50rpx;
	width:180rpx;
	height:150rpx;
	border-radius:80rpx;
}
.login_list{
	/* display:flex;
	flex-direction: row; */
	margin-top:50rpx;
}
.wxapp{
	width:90%;
	height:90rpx;
	margin-left:5%;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 15rpx;
	/* border:1rpx solid #000000; */
	background: #009900;
	color: #FFFFFF;
}
.login_list image{
	width:50rpx;
	height:50rpx;
}
.apple{
	width:90%;
	height:90rpx;
	background:#000000;
	margin-left:5%;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 15rpx;
	color: #FFFFFF;
	margin-top:50rpx;
}
.footer{
	width:100%;
	display:flex;
	flex-direction: row;
	margin-top:50rpx;
}
.footer view{
	width:50%;
	color: #007AFF;
	
}
.footer view:nth-child(1){
	text-align: right;
	border-right: 1rpx solid #000000;
	padding-right: 20rpx;
}
.footer view:nth-child(2){
	padding-left: 20rpx;
}
.bgzd{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	z-index:99;
}
.form{
	position: fixed;
	top: 25%;
	left: 10%;
	width: 79%;
	height: 50%;
	z-index:1000;
	background:#e6e6e6;
	padding:40rpx 15rpx 30rpx 15rpx;
	border-radius: 30rpx;
}
.form_title{
	text-align: center;
	font-weight: bold;
	font-size:17px;
}
.form_content{
	padding-top:20rpx;
	padding-bottom:40rpx;
	font-size:15px;
}
.form_footer{
	padding-top:40rpx;
	display:flex;
	flex-direction: row;
}
.form_footer view{
	width:40%;
	height:60rpx;
	line-height: 60rpx;
	text-align: center;
	color:#FFFFFF;
	border-radius: 20rpx;
}
.form_footer view:nth-child(1){
	background:#ff1a1a;
	margin-left:7%;
}
.form_footer view:nth-child(2){
	background:#009900;
	margin-left:7%;
}
.form_remark{
	color:#007AFF;
}
.test{
	height:80rpx;
	line-height: 80rpx;
	color:#CC0000;
	text-align: center;
}
.loginButton{
	width:70%;
	margin-left:15%;
	height:80rpx;
	line-height: 80rpx;
	background: #FF7800;
	color:#FFFFFF;
	text-align: center;
	border-radius: 50rpx;
	margin-top:100rpx;
}
</style>

